<template>

  <h1>普通用法</h1>
  <el-switch v-model="value1" />


  <h1>设置开关背景色</h1>
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />

  <h1>禁用</h1>
  <el-switch v-model="value1"  disabled/>

  <h1>加载</h1>
  <el-switch v-model="value1"  loading />

  <h1>添加图标</h1>
  <el-switch
      v-model="value1"
      :active-action-icon="View"
      :inactive-action-icon="Hide"
  />


  <h1>文字描述</h1>
  <el-switch
      v-model="value3"
      inline-prompt
      active-text="是"
      inactive-text="否"
  />

  <h1>自定义图标</h1>
  <el-switch
      v-model="value2"
      inline-prompt
      :active-icon="Check"
      :inactive-icon="Close"
  />

  <h1>扩展的value类型</h1>
  <!--开关打开值是100,开关关闭值是0-->
  <el-tooltip :content="'Switch value4: ' + value4" placement="top">
    <el-switch
        v-model="value4"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        active-value="100"
        inactive-value="0"
    />
  </el-tooltip>


  <h1>事件</h1>
  <el-switch v-model="value1" @change="A"/>

  <h1>方法</h1>
  <el-switch v-model="value1" ref="switchs"/>
  <el-button @click="switchFocus">点击</el-button>

</template>

<script setup>

import { ref } from 'vue'
import { Hide, View  } from '@element-plus/icons-vue'
import { Check, Close } from '@element-plus/icons-vue'

const value1 = ref(true)
const value2 = ref(true)
const value3 = ref(true)
const value4 = ref('100')

const A = (value)=> {
  console.log(value)
}

const switchs = ref()
const switchFocus = ()=> {
  console.log("switch获得焦点")
  switchs.value.focus()
}

</script>

<style scoped>

</style>